import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar, DModal } from '@/components'
import { AtButton, AtCountdown, AtList, AtListItem } from 'taro-ui'
import http from '@/api'
import './inventoryfinancingorder.scss'
const bgImages = require('../assets/bgImages.png');
const check = require('../assets/check.png');
export default class InventoryFinancingOrderBox extends Component {

  constructor(props) {
    super(props)
    this.state = {
      status: 1,
      itemLeft: '',
      itemRight: '',
      endStatus: 1,
      list: [
        {
          text: "撤回订单",
          info: [
            {
              text: ""
            }
          ]
        },
        {
          text: "查验车辆",
          info: [
            {
              text: ""
            }
          ]
        },
        {
          text: "",
          info: [
            {
              text: "入库照片"
            }
          ]
        },
        {
          text: "",
          info: [
            {
              text: "入库照片"
            },
            {
              text: "合同凭证"
            }
          ]
        },
      ]
    }
  }

  componentWillMount() {
    let { status = 1 } = this.$router.params
    this.setState({
      status
    }, () => {
      this.getEndStatus()
    })
    this.setState({
      status
    })
  }

  // getDetailInfo(){
  //   http.
  // }

  getIndexStatus(status) {
    return {
      $1: 0,
      $2: 1,
      $3: 2,
      $4: 3,
      $5: 4,
      $6: 4,
    }[`$${status}`]

  }

  getStatusTitle(status) {
    return {
      $1: '待审核',
      $2: '待验车',
      $3: '待确认',
      $4: '交易成功',
      $5: '审核未通过',
      $6: '交易失败'
    }[`$${status}`]
  }

  getEndStatus() {
    let { list, status } = this.state
    let itemList = {}
    if (+status >= 5) {
      itemList = {
        text: "",
        info: [
          {
            text: "入库照片"
          },
          {
            text: "合同凭证"
          }
        ]
      }
    }
    list[4] = itemList
    this.setState({
      list
    })
  }
  onTimeUp() {
    Taro.showToast({
      title: '时间到',
      icon: 'success',
      duration: 2000
    })
  }

  onSubmit() {
    let { status, id } = this.state
    if (+status === 1) {
      // http.getCancelInfo({id}).then(res =>{

      // })
    }
  }

  handleClick() { }

  render() {
    const {
      status, endStatus, list
    } = this.state
    const itemhtml = (status) => {
      let itemLeft = '', itemRight = ''
      switch (status) {
        case '1':
          itemLeft = '资金方正在审核，请耐心等待'
          // })
          break;
        case '2':
          itemLeft = '车辆即将入库，请查看入库照片查验车辆'
          break;
        case '3':
          itemLeft = '请确认资金方上传的资料'
          itemRight = '系统将自动确认信息'
          break;
        case '4':
          itemLeft = '亲，恭喜你成功完成一笔订单！'
          break;
        case '5':
          itemLeft = '很遗憾，您的库融申请未通过审核，您可再次提交申请'
          break;
        case '6':
          itemLeft = '您的订单交易异常，平台客服已介入并终止'
          break;
        default:
          break;
      }
      return <View className='item_title'>
        <Text className='item_title__left'>{itemLeft}</Text>
        <Text className='item_title__right'>{itemRight}</Text>
      </View>

    }
    const atListhtml = (status, endStatus) => {
      let i = this.getIndexStatus(status)
      let itemlist = list[i]
      let { text = '', info = [] } = itemlist

      return <View>
        <View className="b_inventoryfinancingorder__info">
          <AtList>
            {
              info && info.map((item, i) => {
                return <AtListItem title={item.text} arrow='right' onClick={this.handleClick.bind(this)} />
              })
            }

          </AtList>
        </View>
        {
          text && <View className='b_inventoryfinancingorder__footer'>
            <AtButton className='item_btn' onClick={this.onSubmit.bind(this)}>{text}</AtButton>
          </View>
        }
      </View>
    }
    return (
      <View className="b_inventoryfinancingorder">
        <Image src={bgImages} className='b_inventoryfinancingorder__images'></Image>
        <DNavBar title='库融订单' className='b_inventoryfinancingorder__nav'></DNavBar>
        <View className="b_inventoryfinancingorder__box">
          <View className='b_inventoryfinancingorder__header'>
            <View className='item_title'>
              <View className='item_title__left'>
                <Image src={check} className='item_title__left_image'></Image>
                <Text className='item_title__left_text'>{this.getStatusTitle(status)}</Text>
              </View>
            </View>
          </View>
          <View className="b_inventoryfinancingorder__content">
            <View className='item_title'>
              <View className='item_title__left'>
                <Text>订单编号：</Text>
                <Text>CL20191111001</Text>
              </View>
              {
                status == '3' &&
                <View className='item_title__right'>
                  <Text>剩余</Text>
                  {/* <Text>0时30分</Text> */}
                  <AtCountdown
                    format={{ hours: ':', minutes: ':', seconds: '' }}
                    hours={0}
                    minutes={30}
                    onTimeUp={this.onTimeUp.bind(this)}
                  />
                </View>
              }

            </View>
            {itemhtml(status, endStatus)}
            <View className='b_inventoryfinancingorder__content_box'>
            </View>
          </View>
          <View className="b_inventoryfinancingorder__info">
            {/* <Text className='b_inventoryfinancingorder__info_title b_inventoryfinancingorder__info_firsttitle'></Text> */}
            <View className="item_title b_inventoryfinancingorder__info_firsttitle">
              <Text className="item_title__left">用款天数</Text>
              <Text className="item_title__right">7天</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">用款日期</Text>
              <Text className="item_title__right">2019-11-11</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">库融车辆</Text>
              <Text className="item_title__right">保时捷918</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">库融车辆2</Text>
              <Text className="item_title__right">保时捷918</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">库融总额</Text>
              <Text className="item_title__right">80.00万</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">监管方式</Text>
              <Text className="item_title__right">证件抵押</Text>
            </View>
            <View className="item_title">
              <Text className="item_title__left">监管地址</Text>
              <Text className="item_title__right">广州市天河区员村四横路2号</Text>
            </View>
          </View>
          {atListhtml(status, endStatus)}
        </View>
        {/* <DModal></DModal> */}
      </View>
    )
  }
}
